<!--
import { setTimeout } from 'timers';
 * @Author: wangding
 * @Date: 2020-10-09 11:01:08
 * @LastEditTime: 2021-03-15 10:07:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\components\common\baseTable.vue
-->
  
<!--
  用法：同传统的element-table一样用
  <baseTable  :data="data" border   stripe @selection-change="handleSelectionChange($event)" @change='change($event)' :column='column'  :select='true'>
     <template #mg_state="{data}">
       {{data.mg_state}}
     </template>
     <template #option="{data}">
       <div class="option-box">
         <el-button size='small' type="primary" icon="el-icon-edit" @click='editUsers(data)'></el-button>
         <el-button size='small' type="danger" icon="el-icon-delete" @click='deleteUsers(data)'></el-button>
         <el-button size='small' type="warning" icon="el-icon-setting" @click='editRoles(data)'></el-button>
       </div>
     </template>
   </baseTable>
-->
<template>
  <div class="baseTable-main-box">
    <div class="table-nav-box" >
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          <i class="el-icon-s-grid el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item v-for='(item,index) in column' :key='index'><el-checkbox  v-model="item.show" @change='columnItemChange'>{{item.title}}</el-checkbox></el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table
        v-bind='$attrs' @selection-change="handleSelection"  :border="true"  v-if='tableFlag'>
      <el-table-column type="expand" v-if='$attrs.expand'  > 
        <template slot-scope="props">
          <slot  name='expand' :data='props.row'>{{props.row}}</slot>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="30px" align='center' v-if='$attrs.select' >
      </el-table-column>
      <el-table-column type="index" :index="indexMethod" :label="$t('pageNumber')" align='center'  width="60">
      </el-table-column>
      <!-- :min-width="item.min_width||''" -->
      <template v-for='(item,index) in $attrs.column' >
        <el-table-column
        :prop="item.value"
        :label="item.title"
        :width='item.width || ""'
        :min-width="item.min_width||''"
        :key='index'
        v-if='(item.show === false ? false:true)&&item.min_width'
        :sortable='item.sortable?true:false'
        align='center'
        :selectable='checkSelectable'
        :resizable="true"
        >
          
          <template slot-scope="scope">
              <slot  :name='item.slot' :data='scope.row'>
                  {{isNot(scope.row[item.value])}}
              </slot>
          </template>
        </el-table-column>
        <af-table-column
        :prop="item.value"
        :label="item.title"
        :min-width="item.width||''"
        :width='item.width || ""'
        :key='index'
        v-if='(item.show === false ? false:true)&&!item.min_width'
        :sortable='item.sortable?true:false'
        align='center'
        :selectable='checkSelectable'
        :resizable="true"
        :fontSize="6"
        :fontRate='fontRate'
        >
          <template slot-scope="scope">
              <slot  :name='item.slot' :data='scope.row'>
                  {{isNot(scope.row[item.value])}}
              </slot>
          </template>
        </af-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [],
      fontRate:{
        CHAR_RATE: 1, // 汉字比率
        NUM_RATE: 0.65, // 数字
        OTHER_RATE:0.64 // 除汉字和数字以外的字符的比率
      },
      column:[],
      tableFlag:true
    }
  },
  props: {
    current:null,
    size:null
  },
  mounted () {
      let that = this
      document.onkeydown = function(e){
          if(e.keyCode == 13 && that.$parent.query ){
            that.$parent.query()
          }
          // console.log(that.$parent.query(),'parent');
          // if(e.keyCode == 13 && that.$route.fullPath == "/printingSN"){
          //     // alert("回车键事件触发~");
          //     that.print()
          // }
      }
      // console.log(this.$attrs['row-class-name']());
  },
  watch:{
    $attrs:{
      handler(nv,ov){
        if(nv&&nv.column){
          this.column = nv.column
          this.column.forEach(item=>{
            if(item.show === false){
            }else{
              // item['show'] = true
              this.$set(item,'show',true)
            }
          })
        }
      },
      deep:true,
    }
  },
  methods: {
    columnItemChange(){
      this.tableFlag = false
      setTimeout(()=>{
        this.tableFlag = true
      },80)
    },
    checkSelectable(row){
      return 1 == 2
    },
    handleSelection (val) {
      if (Object.keys(this.$listeners).indexOf('selection-change') !== -1) {
        this.$emit('selection-change', val)
      }
    },
    tableRowClassName({row, rowIndex}){
      
        // this.$attrs['row-class-name']({row, rowIndex})
        if (rowIndex === 1) {
          console.log('sadadsa');
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
    },
    isNot(val){
      if(val === null || val === "" || val === undefined){
        return ' - '
      }else{
        return val
      }
    },
    indexMethod(index){
      let current=this.$parent.current||this.current||1;
      let size=this.$parent.size||this.size||10;
      if(current){
        if(current==1){
          return index+1; 
        }else{
          return index+1+size*(current-1);
        }
      }else{
        return index+1;
      }
    }
  }
}
</script>
<style lang="less">
.baseTable-main-box{
  .table-nav-box{
    float: right;
    i{
      font-size: 30px;
      color: #a1a1a1;
    }
  }
  .break-word-text{
    // white-space: nowrap;
    overflow: visible;
  }
  .el-table td, .el-table th {
      padding: 0px;
      }
  .el-table tr {
      background-color: #e4e4e4;
  }
  .el-table th {
      background-color: #666;
  }
  .el-table__footer-wrapper thead div, .el-table__header-wrapper thead div {
      background-color: #666;
      color: #fff;
  }
  .break-word-text{
    // word-wrap:break-word;
  }
  .el-table th>.cell{
    overflow: visible;
    white-space:nowrap;
    word-break: keep-all;
    // text-overflow: ellipsis;
    // // overflow: hidden;
    // max-width: 260px;
    // box-sizing: border-box;
    padding: 10px 0px;
  }
  .el-table .cell{
    padding: 7px 5px;
    overflow: visible;
    white-space: nowrap;
    word-break: keep-all;
  }
  .el-table .cell, .el-table--border td:first-child .cell{
    padding-left: 5px; 
  }
  .el-table--border td,
  .el-table--border th{
    border-right:none;
  }
  
  // .el-table .cell {
  //   overflow: visible;
  // }
}
</style>
